<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item label="手机号">
                    <el-input v-model="filters.mobilePhone" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item label="是否可用" prop="isRecharge">
                    <el-select v-model="filters.isRecharge" filterable placeholder="是否可用">
                        <el-option value="-1" label="全部">全部</el-option>
                        <el-option value="1" label="可用">可用</el-option>
                        <el-option value="0" label="不可用">不可用</el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="是否已经使用" prop="isUsed">
                    <el-select v-model="filters.isUsed" filterable placeholder="是否已经使用">
                        <el-option value="-1" label="全部">全部</el-option>
                        <el-option value="1" label="可以充值">可以充值</el-option>
                        <el-option value="0" label="不可充值">不可充值</el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="是否登录" prop="state">
                    <el-select v-model="filters.state" filterable placeholder="是否登录">
                        <el-option value="-1" label="全部">全部</el-option>
                        <el-option value="1" label="已经登录">已经登录</el-option>
                        <el-option value="0" label="未登录">未登录</el-option>
                    </el-select>
                </el-form-item>

                <!--<el-form-item  label="刷新时间" >-->
                    <!--<el-date-picker type="datetime" placeholder="刷新时间"   v-model="filters.renovateTime" style="width: 100%;"></el-date-picker>-->
                <!--</el-form-item>-->

                <el-form-item>
                    <el-button type="primary" v-on:click="pageNumber">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="addNumber">添加</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getMyInfo">查询短信余额</el-button>
                </el-form-item>


            </el-form>
        </el-col>
        <!--列表-->
        <template>
            <el-table :data="numbers" highlight-current-row v-loading="loading" max-height="620"  @selection-change="selsChange" border  style="width: 100%;">
                <el-table-column  type="selection"  width="80" label="编号">
                </el-table-column>
                <el-table-column prop="mobilePhone" label="手机号" width="130px" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="smsCode" label="短信验证码" width="120px"  show-overflow-tooltip   >
                </el-table-column>
                <el-table-column prop="operators" label="运营商" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="city" label="归属地" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="state" label="是否登录"  width="100px" show-overflow-tooltip  :formatter="formatstate" >
                </el-table-column>
                <el-table-column prop="isused" label="是否使用"  width="100px" show-overflow-tooltip  :formatter="formatisused" >
                </el-table-column>
                <el-table-column prop="currentNum" label="当月充值次数" show-overflow-tooltip >
                </el-table-column>
                <el-table-column prop="sumNum" label="总充值次数" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="successNum" label="成功次数"  width="100px" show-overflow-tooltip >
                </el-table-column>
                <el-table-column prop="falitNum" label="失败次数"  width="100px" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="isRecharge" label="是否继续充值 " width="120px" show-overflow-tooltip   :formatter="formatisRecharge">
                </el-table-column>
                <el-table-column prop="renovateTime" label="刷新时间"  width="170px" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="loginTime" label="登陆时间"  width="170px" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间"  width="170px" show-overflow-tooltip  >
                </el-table-column>
                <el-table-column prop="remark" label="备注" show-overflow-tooltip  >
                </el-table-column>

                <el-table-column label="操作"    width="420">
                    <template scope="scope"   >
                        <el-button size="small"   @click="handleDetail(scope.$index, scope.row)">详情
                        </el-button>
                        <el-button size="small"   @click="handleSendSms(scope.$index, scope.row)">
                            获取验证码
                        </el-button>
                        <el-button size="small"   @click="handleEdit(scope.$index, scope.row)">
                            输入验证码登录
                        </el-button>
                        <el-button size="small"   @click="handleLogin(scope.$index, scope.row)">
                           登录
                        </el-button>
                        <el-button size="small"   @click="handleClose(scope.$index, scope.row)">
                            关闭
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                layout="total,sizes,prev, pager, next"
                :total="total">
        </el-pagination>


        <el-dialog title="添加手机号" v-model="addFormVisible" :close-on-click-modal="false">
            <el-form :model="addForm" label-width="200px"  :inline="true" :rules="addFormRules"  ref="addForm">
                <el-form-item label="手机号" :inline="true">
                    <el-input v-model="addForm.mobilePhone" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item label="验证码" :inline="true">
                    <el-input v-model="addForm.smscode" placeholder="验证码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible=false">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>

        <el-dialog title="添加验证码" v-model="editFormVisible" :close-on-click-modal="false">
            <el-form :model="editForm" label-width="200px"  :inline="true" :rules="editFormRules"  ref="editForm">
                <el-form-item label="手机号" :inline="true">
                    <el-input v-model="editForm.mobilePhone" disabled="disabled" placeholder="手机号"></el-input>
                </el-form-item>
                <el-form-item label="验证码" :inline="true">
                    <el-input v-model="editForm.smscode" placeholder="验证码"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible=false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>

</template>
<script>
    import { pageNumber ,closeNumber,sendsms,handleDetail,updateNumber,addNumber,getMyInfo,loginPool } from '../../api/api';
    //import NProgress from 'nprogress'
    import moment from 'moment';
    var crypto = require('crypto');
    export default {
        data() {
            return {
                filters: {
                    renovateTime: '',// moment(new Date(),"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD') + " 00:00:00", "mobilePhone","isRecharge","renovateTime"
                    mobilePhone:'',
                    isRecharge:'-1',
                    isUsed:'-1',
                    state:'-1'
                },
                fileList: [],
                isShowSupper:JSON.parse(sessionStorage.getItem("user")).usertype === 2 ? true : false,
                start:0,
                pageSize:10,
                total:0,
                loading: false,
                numbers:[],
                sels:[],
                addLoading:false,
                addFormVisible: false,
                addFormLoading: false,
                addFormRules: {
                },
                addForm: {
                    mobilePhone: '',
                    smscode:''
                },

                editLoading:false,
                editFormVisible: false,
                editFormLoading: false,
                editFormRules: {
                },
                editForm: {
                    mobilePhone: '',
                    smscode:''
                },
            }
        },
        methods: {

            formatisRecharge: function (row, column) {
//				 1可以充值 0 不可充值
                return row.isRecharge == 1 ? '可以充值' : row.isRecharge == 0 ? '不可充值' : "未知";
            },
            formatisused: function (row, column) {
//				  1已经使用 0未使用 默认0
                return row.isUsed == 1 ? '已经使用' : row.isUsed == 0 ? '未使用' : "未知";
            },
            formatstate: function (row, column) {
//				状态 1已经登录 0未登录
                return row.state == 1 ? '已经登录' : row.state == 0 ? '未登录' : "未知";
            },

            pageNumber: function () {
                let para = {
                    start:this.start,
                    pageSize:this.pageSize,
                    renovateTime: this.filters.renovateTime == "" ? "" :  moment(this.filters.renovateTime,"YYYY-MM-DD HH:mm:ss").format('YYYY-MM-DD HH:mm:ss'),
                    mobilePhone: this.filters.mobilePhone,
                    isRecharge:  this.filters.isRecharge == '-1' ? "" : this.filters.isRecharge,
                    isUsed:  this.filters.isUsed == '-1' ? "" : this.filters.isUsed,
                    state:  this.filters.state == '-1' ? "" : this.filters.state,
                };
                pageNumber(para).then(datas => {
                    this.loading = false;
                    let { message, code, data } = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    } else {
                        this.numbers = data.result;
                        this.total = data.totalCount;
                    }
                }).catch(e =>{

                });
            },handleCurrentChange:function(val){
                this.start = val - 1;
                this.pageNumber();
            },
            handleSizeChange:function(val){
                this.pageSize = val;
                this.pageNumber();
            } ,addNumber:function () {
                this.addFormVisible = true;
            },handleDetail:function (index,row) {
                let para = {
                    numberPoolId : row.numberPoolId
                };
                handleDetail(para).then((datas) => {
                    let { message, code, data } = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    }
                    this.$message({
                        message: data,
                        type: 'warning'
                    });
                });
            },handleSendSms:function(index,row) {
                let para = {
                    mobilePhone : row.mobilePhone
                };
                sendsms(para).then((datas) => {
                    let { message, code, data } = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    }
                    this.$message({
                        message: message,
                        type: 'info'
                    });
                });
            }
            ,submitUpload(){
                this.$refs.importBroadbandUpload.submit();
            },
            handleClose:function (index,row) {
                let para = {
                    numberPoolId : row.numberPoolId
                };
                closeNumber(para).then((datas) => {
                    let { message, code, data } = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message,
                            type: 'error'
                        });
                    }
                   this.pageNumber();
                });
            } ,selsChange: function (sels) {
                this.sels = sels;
            },
            addSubmit: function () {
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            let para = Object.assign({}, this.addForm);
                            addNumber(para).then((datas) => {
                                this.addLoading = false;
                                let {message, code, data} = datas;
                                if (code !== "0") {
                                    this.$message({
                                        message: message,
                                        type: 'error'
                                    });
                                }
                                this.$refs['addForm'].resetFields();
                                this.addFormVisible = false;
                                this.pageNumber();
                            });
                        });
                    }
                });
            },handleEdit(index,row){
                this.editFormVisible = true;
                this.editForm.mobilePhone = row.mobilePhone;
                this.editForm.smscode = row.smscode;
            },editSubmit(){
                this.$refs.editForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editLoading = true;
                            let para = Object.assign({}, this.editForm);
                            updateNumber(para).then((datas) => {
                                this.editLoading = false;
                                let {message, code, data} = datas;
                                if (code !== "0") {
                                    this.$message({
                                        message: message,
                                        type: 'error'
                                    });
                                }
                                this.$refs['addForm'].resetFields();
                                this.editFormVisible = false;
                                this.pageNumber();
                            });
                        });
                    }
                });
            },getMyInfo(){
                getMyInfo().then((datas) => {
                    let {message, code, data} = datas;
                    if (code !== "0") {
                        this.$message({
                            message: message+"60秒后再试",
                            type: 'error'
                        });
                    }else{
                        this.$message({
                            message: '余额:'+data.balance+",积分:"+data.integral,
                            type: 'info'
                        });
                    }
                });
            },handleLogin(index,row){
                loginPool
            }
        },

        mounted() {
            this.pageNumber();
        },
        beforeCreate: function (){
        }
    };

</script>

<style scoped>

</style>
